/********************************
* namespaces
*********************************/
var Narti = Narti || {};
Narti.Canvas = Narti.Canvas || {};

/********************************
* constructor
*********************************/
Narti.Canvas.Wallaby = function(jCtr, numMovers){
	
	this.canvas = document.createElement("canvas");
	if( this.canvas == null )return;
	this.context = this.canvas.getContext('2d');
	if( this.context == null )return;
	
	jCtr.append(this.canvas);
	
	
	this.offsetX = jCtr.offset().left;
	this.offsetY = jCtr.offset().top;
	
	this.canvas.width = jCtr.width();
	this.canvas.height = jCtr.height();
	
	this.prevMouseX = this.prevMouseY = 0;

	this.mouseX = this.prevMouseX = this.canvas.width * 0.5;
	this.mouseY = this.prevMouseY = this.canvas.height * 0.5;

	
	$((this.canvas)).mousemove((function(self) {
					  return function(e){	
				 	  	self.mouseX = e.pageX - self.offsetX;
					 	self.mouseY = e.pageY - self.offsetY;
					// 	console.log("mouseX, mouseY : " + self.mouseX + "," + self.mouseY);
					  }
		    	  })(this));			 
				  
	$((this.canvas)).mousedown((function(self) {
					  return function(e){	
				 	  	self.isMousedown = true;
					  }
		    	  })(this));			 
    $((this.canvas)).mouseup((function(self) {
					  return function(e){	
				 	  	self.isMousedown = false;
					  }
		    	  })(this));			 
				  
	this.movers = [];
	for(var i = 0; i < numMovers; i++){
		var m = new Narti.Canvas.Mover();
		m.x   = this.canvas.width * 0.5;
		m.y   = this.canvas.height * 0.5;
		m.vX  = Math.cos(i) * Math.random() * 34;
		m.vY  = Math.sin(i) * Math.random() * 34;
		this.movers.push(m);
	}
				  
	this.context.fillStroke = "#555";
	this.context.fillRect( 0 , 0 , this.canvas.width , this.canvas.height );				  
		
//	this.draw();
	
};

Narti.Canvas.Wallaby.prototype = {
	friction : 0.96,
	interval : 33,
	setInterval: function(i){
		this.interval = i;
	},
	setFriction: function(f){
		this.friction = f;
	},
	animate : function(){
		this.intervalID = setInterval(
			(function(self) {
				 	 return function() {self.draw();
		    	 }
			})(this), this.interval);  
		
	},
	draw: function(){
		
		this.context.globalCompositeOperation = "source-over";
//		this.context.fillStyle = "rgba(8,8,12,0.65)";
//		this.context.fillStyle = "rgba(20,20,20,0.65)";
//		this.context.fillRect( 0 , 0 , this.canvas.width , this.canvas.height );
		this.context.clearRect( 0 , 0 , this.canvas.width , this.canvas.height );
		this.context.globalCompositeOperation = "lighter";
		
		var mouseVX = this.mouseX - this.prevMouseX;
		var mouseVY = this.mouseY - this.prevMouseY;
		this.prevMouseX = this.mouseX;
		this.prevMouseY = this.mouseY;
		
		var toDist   = this.canvas.width * 0.86;
		var stirDist = this.canvas.width * 0.125;
		var blowDist = this.canvas.width * 0.5;
		
		var Mrnd = Math.random;
		var Mabs = Math.abs;
		
		var i = this.movers.length;
		while ( i-- ){
			var m  = this.movers[i];
			var x  = m.x;
			var y  = m.y;
			var vX = m.vX;
			var vY = m.vY;
			
			var dX = x - this.mouseX;
			var dY = y - this.mouseY; 
			var d  = Math.sqrt( dX * dX + dY * dY ) || 0.001;
			dX /= d;
			dY /= d;
			
			if ( this.isMousedown ){
				if ( d < blowDist ){
					var blowAcc = ( 1 - ( d / blowDist ) ) * 14;
					vX += dX * blowAcc + 0.5 - Mrnd();
					vY += dY * blowAcc + 0.5 - Mrnd();
				}
			}
			
			if ( d < toDist ){
				var toAcc = ( 1 - ( d / toDist ) ) * this.canvas.width * 0.0014;
				vX -= dX * toAcc;
				vY -= dY * toAcc;			
			}
			
			if ( d < stirDist ){
				var mAcc = ( 1 - ( d / stirDist ) ) * this.canvas.width * 0.00026;
				vX += mouseVX * mAcc;
				vY += mouseVY * mAcc;			
			}
			
			vX *= this.friction;
			vY *= this.friction;
			
			var avgVX = Mabs( vX );
			var avgVY = Mabs( vY );
			var avgV  = ( avgVX + avgVY ) * 0.5;
			
			if( avgVX < .1 ) vX *= Mrnd() * 3;
			if( avgVY < .1 ) vY *= Mrnd() * 3;
			
			var sc = avgV * 0.45;
			sc = Math.max( Math.min( sc , 3.5 ) , 0.4 );
			
			var nextX = x + vX;
			var nextY = y + vY;
			
			if ( nextX > this.canvas.width ){
				nextX = this.canvas.width;
				vX *= -1;
			}
			else if ( nextX < 0 ){
				nextX = 0;
				vX *= -1;
			}
			
			if ( nextY > this.canvas.height ){
				nextY = this.canvas.height;
				vY *= -1;
			}
			else if ( nextY < 0 ){
				nextY = 0;
				vY *= -1;
			}
			
			m.vX = vX;
			m.vY = vY;
			m.x  = nextX;
			m.y  = nextY;
			
			this.context.fillStyle = m.color;
			this.context.beginPath();
			this.context.arc( nextX , nextY , sc , 0 , Math.PI * 2 , true );
			this.context.closePath();
			this.context.fill();		
		}
	}
	
	
};

Narti.Canvas.Mover = function(){
		this.color = "rgb(" + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + "," + Math.floor( Math.random()*255 ) + ")";
		this.y     = 0;
		this.x     = 0;
		this.vX    = 0;
		this.vY    = 0;
		this.size  = 1; 
	}
